<template>
  <div class="login_wrap">
  <div id="topcontainer" :class="lg">
   <div id="bannertop" class="clearfix" >
    <div class="bannertopleft">
     <div class="banneroperate">
      <span class="registe" @click="fromType('register')" v-html="$t('lgPage.Registered')">注册</span>
      <span class="login" @click="fromType('login')" v-html="$t('lgPage.login')">登录</span>
     </div>
    </div>
    <div class="banope-right">
     <div class="select zhong">
      <span class="lang"><a href="javascript:;" v-html="$t('lgPage.lang')">{{lang}} </a></span>
      <div class="drop langs_list">
       <ul>
        <li> <a href="javascript:void(0);" class="set_langs" @click="changelang('zh-CN','简体中文')">简体中文</a> </li>
        <li> <a href="javascript:void(0);" class="set_langs" @click="changelang('zh-TW','繁体中文')">繁体中文</a> </li>
        <li> <a href="javascript:void(0);" class="set_langs" @click="changelang('en-US','English')">English</a> </li>
        <li> <a href="javascript:void(0);" class="set_langs" @click="changelang('ja','わぶん')">わぶん</a> </li>
       </ul>
      </div>
     </div>
    </div>
   </div>
   <div class="common">
    <div class="regcontainer" v-if="loginType==='register'">
     <div class="regcon">
      <p class="regtitle" v-html="$t('lgPage.loginheader')">欢迎加入 lolocc</p>
      <form id="register_form">
       <ul>
        <li class="mysex">
            <span>{{$t("lgPage.sex")}}</span>
            <input type="radio" name="gender" value="man" v-model="register.sex" />
            <label for="gender_1">{{$t("lgPage.Male")}}</label><input type="radio" v-model="register.sex" value="woman" id="gender_2" />
            <label for="gender_2">{{$t("lgPage.Female")}}</label>
        </li>
        <li>
          <span>{{$t("lgPage.Birthday")}}</span>
          <select id="reg_month" name="reg_month" v-model="register.month">
              <option disabled>{{$t("lgPage.month")}}</option>
              <option value="01">01</option>
              <option value="02">02</option>
              <option value="03">03</option>
              <option value="04">04</option>
              <option value="05">05</option>
              <option value="06">06</option>
              <option value="07">07</option>
              <option value="08">08</option>
              <option value="09">09</option>
              <option value="10">10</option>
              <option value="11">11</option>
              <option value="12">12</option>
           </select>
            <select id="reg_day" name="reg_day" v-model="register.day">
                <option disabled>{{$t("lgPage.day")}}</option>
                <option value="01">01</option>
                <option value="02">02</option>
                <option value="03">03</option>
                <option value="04">04</option>
                <option value="05">05</option>
                <option value="06">06</option>
                <option value="07">07</option>
                <option value="08">08</option>
                <option value="09">09</option>
                <option value="10">10</option>
                <option value="11">11</option>
                <option value="12">12</option>
                <option value="13">13</option>
                <option value="14">14</option>
                <option value="15">15</option>
                <option value="16">16</option>
                <option value="17">17</option>
                <option value="18">18</option>
                <option value="19">19</option>
                <option value="20">20</option>
                <option value="21">21</option>
                <option value="22">22</option>
                <option value="23">23</option>
                <option value="24">24</option>
                <option value="25">25</option>
                <option value="26">26</option>
                <option value="27">27</option>
                <option value="28">28</option>
                <option value="29">29</option>
                <option value="30">30</option>
                <option value="31">31</option>
            </select>
            <select id="reg_year" name="reg_year" style="margin-right: 0" v-model="register.year">
                <option disabled>{{$t("lgPage.year")}}</option>
                <option value="2020">2019</option>
                <option value="2019">2019</option>
                <option value="2018">2018</option>
                <option value="2017">2017</option>
                <option value="2016">2016</option>
                <option value="2015">2015</option>
                <option value="2014">2014</option>
                <option value="2013">2013</option>
                <option value="2012">2012</option>
                <option value="2011">2011</option>
                <option value="2010">2010</option>
                <option value="2009">2009</option>
                <option value="2008">2008</option>
                <option value="2007">2007</option>
                <option value="2006">2006</option>
                <option value="2005">2005</option>
                <option value="2004">2004</option>
                <option value="2003">2003</option>
                <option value="2002">2002</option>
                <option value="2001">2001</option>
                <option value="2000">2000</option>
                <option value="1999">1999</option>
                <option value="1998">1998</option>
                <option value="1997">1997</option>
                <option value="1996">1996</option>
                <option value="1995">1995</option>
                <option value="1994">1994</option>
                <option value="1993">1993</option>
                <option value="1992">1992</option>
                <option value="1991">1991</option>
                <option value="1990">1990</option>
                <option value="1989">1989</option>
                <option value="1988">1988</option>
                <option value="1987">1987</option>
                <option value="1986">1986</option>
                <option value="1985">1985</option>
                <option value="1984">1984</option>
                <option value="1983">1983</option>
                <option value="1982">1982</option>
                <option value="1981">1981</option>
                <option value="1980">1980</option>
            </select>
        </li>
        <li><span>{{$t("lgPage.Mailbox")}}</span><input v-model="register.mail" type="text" id="email" /></li>
        <li><span>{{$t("lgPage.name")}}</span><input v-model="register.name" type="text" id="name" /></li>
        <li><span>{{$t("lgPage.Account")}}</span><input v-model="register.userName" type="text" id="username" /></li>
        <li><span>{{$t("lgPage.Password")}}</span><input v-model="register.password" type="password" id="pwd" /></li>
        <!-- <li><span>{{$t("lgPage.Confirmpassword")}}</span><input v-model="register.again_pwd" type="password" id="again_pwd" /></li> -->
       </ul>
      </form>
      <div class="regbtn" id="register" @click="registerSubmit">
       <span>{{$t("lgPage.Registered")}}</span>
      </div>
     </div>
    </div>
    <div class="regcontainer" v-else-if="loginType==='login'">
     <div class="regcon logincon">
      <p class="regtitle" v-html="$t('lgPage.loginheader')">欢迎登录 lolocc</p>
      <ul>
       <li><span v-html="$t('lgPage.Account')">账号</span><input type="text" v-model="login.userName" :placeholder="$t('lgPage.Account')" /></li>
       <li><span v-html="$t('lgPage.Password')">密码</span><input type="password" v-model="login.password" :placeholder="$t('lgPage.Password')" /></li>
       <li class="forget"><span id="btn_forget_password" @click="fromType('forget')" v-html="$t('lgPage.forget_password')">忘记密码</span></li>
      </ul>
      <div class="regbtn" @click="submit">
       <span v-html="$t('lgPage.login')">登录</span>
      </div>
     </div>
    </div>
    <div class="regcontainer" v-else-if="loginType==='forget'">
     <div class="regcon logincon">
      <p class="regtitle" v-html="$t('lgPage.forget_password')">忘记密码</p>
      <ul class="forget_passwordbox">
       <li  v-if="resrBt==='pre'">
         <div class="inpbox">
          <div class="head" v-html="$t('lgPage.Account')">账号：</div>
          <input type="text" v-model="forget.username" id="reset_email" :placeholder="$t('lgPage.Account')" />
         </div>
       </li>
       <li>
          <p class="emailcallMsg" v-if="emailbackStatus">
            <b>{{$t('getEmailMsg')}}</b>
            <em style="color:red">{{callbackEmail}}</em>
          </p>
          <p class="emailcallMsg" v-else>
            <em style="color:red">{{callbackEmail}}</em>
          </p>
       </li>
       <li v-if="emailbackStatus">
         <div class="inpbox">
          <div class="head long" v-html="$t('code')">验证码：</div>
          <input class="long" type="text" v-model="forget.code" id="reset_email" :placeholder="$t('lgPage.Account')" />
         </div>
       </li>
       <li v-if="emailbackStatus">
         <div class="inpbox">
          <div class="head long" v-html="$t('newpassword')">新秘密：</div>
          <input class="long" type="text" v-model="forget.newpwd" id="reset_email" :placeholder="$t('lgPage.Account')" />
         </div>
       </li>
      </ul>
      <div class="regbtn" id="reset_password" @click="resetPassword" v-if="resrBt==='pre'">
       <span v-html="$t('lgPage.send')">发送</span>
      </div>
      <div class="regbtn" id="reset_password" @click="sendCode" v-else>
       <span v-html="$t('lgPage.send')">发送</span>
      </div>
     </div>
    </div>
   </div>
  </div>
  <div class="login_bottom">
    <img :src="ftImg" >
  </div>
  <!-- <div id="parttwo">
   <div class="partcontent">
    <p class="title" v-html="$t('lgPage.content_head')">用户评价“她”</p>
    <div class="arguments">
     <div class="list1 list" >
      <div class="listcontent">
       <h4>01</h4>
       <p class="opinion" v-html="$t('lgPage.infor_1')">在这个快餐的时代，本想只是找一个私密的伴侣，没想到却在这里意外收获了我的婚姻！</p>
       <div class="hua"></div>
      </div>
     </div>
     <div class="list2 list" >
      <div class="listcontent">
       <h4>02</h4>
       <p class="opinion" v-html="$t('lgPage.infor_2')">不可能有真正安全的艳遇，但是至少在这里，我完全可以释放我内心深处的那一面，让彼此的相遇更加安全隐秘！</p>
       <div class="hua"></div>
      </div>
     </div>
    </div>
   </div>
  </div>
  <input type="hidden" id="pid" value="" />
  <br />
  <div class="bottom_nav">
   <a href="#"><img :src="bottom_nav" /></a>
  </div>
  <div class="bottom_nav" >
    <router-link tag="a" :to="{path:'/web', query:{id:'1'}}"> About Us</router-link>|
    <router-link tag="a" :to="{path:'/web', query:{id:'2'}}">Terms of Use</router-link>|
    <router-link tag="a" :to="{path:'/web', query:{id:'3'}}"> Privacy Policy</router-link>|
    <router-link tag="a" :to="{path:'/web', query:{id:'4'}}"> Dating Safety</router-link>|
    <router-link tag="a" :to="{path:'/web', query:{id:'5'}}"> Help Center</router-link> |
    <router-link tag="a" :to="{path:'/web', query:{id:'6'}}">Contact Us</router-link> |
  </div>
  <div class="bottom_pay">
   <a href="#">Billing Address UAB Glocash Payment (Address:Mesiniu str.5, Vilnius, Lithuania)</a>
  </div> -->
  </div>
</template>
<style lang='less' scoped>
    @import url('./index.less');
</style>
<script>
import {
  ften,
  ftzh,
  ftcw
} from '@/assets/images'
import axios from '@/common/api'
import bottomNav from '@/assets/images/login/bottom_nav.png'
import utils from '@/common/api/tool.js'
var successMsgTip = utils.successMsgTip
export default {
  data () {
    return {
      ften,
      ftzh,
      ftcw,
      lg: 'zh',
      bottom_nav: bottomNav,
      lang: ' 简体中文',
      loginType: 'register',
      register: {
        userName: '',
        password: '',
        name: '',
        mail: '',
        month: '',
        day: '',
        year: '',
        again_pwd: ''
      },
      forget: {
        username: '',
        code: '',
        newpwd: ''
      },
      login: {
        'userName': '',
        'password': ''
      },
      ftImg: ftzh,
      emailbackStatus: '',
      callbackEmail: '',
      resrBt: 'pre'
    }
  },
  created () {
    var locale = localStorage.getItem('locale')
    if (locale === 'en-US') {
      this.ftImg = this.ften
      this.locale = 'en'
    } else if (locale === 'zh-TW') {
      this.ftImg = this.ftcw
      this.lg = 'tw'
    } else if (locale === 'ja') {
      this.ftImg = this.ftcw
      this.lg = 'jp'
    } else {
      this.ftImg = this.ftzh
      this.lg = 'zh'
    }
  },
  mounted () {
    let self = this
    this.getuser()
    document.onkeypress = function (e) {
      var keycode = document.all ? event.keyCode : e.which
      if (keycode === 13) {
        var type = self.loginType
        if (type === 'login') {
          self.submit()
        } else if (type === 'register') {
          self.registerSubmit()
        } else {

        }
      }
    }
    let JSCOOKIE = utils.getCookie('JSCOOKIE') ? utils.getCookie('JSCOOKIE') : (utils.getCookie('JSCOOKIE_test') ? utils.getCookie('JSCOOKIE_test') : false)
    if (!JSCOOKIE) {
      var loginType = localStorage.getItem('loginType') || 'register'
      this.loginType = loginType
    } else {
      // this.$router.push('/')
    }
  },
  // beforeRouteEnter (to, from, next) {
  //   let pre = from.name
  //   if (pre === 'index') {
  //     next(vm => {
  //       vm.loginType = 'login'
  //     })
  //   }
  // },
  methods: {
    fromType (e) {
      this.loginType = e
      if (e === 'forget') {
        this.resrBt = 'pre'
        this.emailbackStatus = ''
        this.callbackEmail = ''
        this.forget.code = ''
        this.forget.newpwd = ''
        this.forget.username = ''
      }
    },
    getuser () {
      var self = this
      axios.request({
        url: '/member/info',
        method: 'GET'
      })
        .then(function (res) {
          var status = res.data.code
          if (status === 200) {
            self.$router.push('/')
          }
        })
    },
    changelang (type, word) {
      // 此处做了语言选择记录
      var self = this
      localStorage.setItem('locale', type)
      var locale = type
      if (locale === 'en-US') {
        this.ftImg = this.ften
        this.lg = 'en'
      } else if (locale === 'zh-TW') {
        this.ftImg = this.ftcw
        this.lg = 'tw'
      } else if (locale === 'ja') {
        this.ftImg = this.ftcw
        this.lg = 'jp'
      } else {
        this.ftImg = this.ftzh
        this.lg = 'zh'
      }
      // 修改显示语言
      this.$i18n.locale = type
      this.lang = word
      axios.request({
        url: '/change/language',
        method: 'GET',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        },
        params: {
          'language': type
        }
      })
        .then(function (response) {
          // console.log(response)
        })
        .catch(function (error) {
          self.$Message.error(error)
        })
    },
    submit () {
      var self = this
      var user = this.login
      axios.request({
        url: '/member/login',
        method: 'POST',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        },
        params: user
      })
        .then(function (res) {
          let status = res.data.code
          if (status === 200) {
            self.$router.push('/')
          } else {
            self.$Message.error(res.data.msg)
          }
        })
        .catch(function (error) {
          self.$Message.error(error)
        })
    },
    registerSubmit () {
      var self = this
      var registerdata = this.register
      var birthDate = ''
      let y = registerdata.year
      let m = registerdata.month
      let d = registerdata.day
      // var againpwd = registerdata.again_pwd
      var password = registerdata.password
      var userName = registerdata.userName
      var name = registerdata.name
      var mail = registerdata.mail
      var sex = registerdata.sex
      var locale = localStorage.getItem('locale')
      if (!sex || sex === '') {
        let msgTip = '请选择性别'
        if (locale === 'en-US') {
          msgTip = 'Please select gender'
        } else if (locale === 'zh-TW') {
          msgTip = '請選擇性別'
        } else if (locale === 'ja') {
          msgTip = '性別を選んでください'
        }
        this.$Message.error(msgTip)
        return false
      }
      if (!y || y === '' || !m || m === '' || !d || d === '') {
        let msgTip = '请选择生日'
        if (locale === 'en-US') {
          msgTip = 'Please select a birthday'
        } else if (locale === 'zh-TW') {
          msgTip = '請選擇生日'
        } else if (locale === 'ja') {
          msgTip = '誕生日を選択してください'
        }
        this.$Message.error(msgTip)
        return false
      } else {
        birthDate = registerdata.year + '-' + registerdata.month + '-' + registerdata.day
      }
      if (!mail || mail === '') {
        let msgTip = '请填写邮箱'
        if (locale === 'en-US') {
          msgTip = 'The mailbox cannot be empty'
        } else if (locale === 'zh-TW') {
          msgTip = '請填寫郵箱'
        } else if (locale === 'ja') {
          msgTip = 'メールアドレスを記入してください'
        }
        this.$Message.error(msgTip)
        return false
      }
      if (!name || name === '') {
        let msgTip = '昵称不能为空'
        if (locale === 'en-US') {
          msgTip = 'Nicknames cannot be empty'
        } else if (locale === 'zh-TW') {
          msgTip = '昵稱不能為空'
        } else if (locale === 'ja') {
          msgTip = 'ニックネームは空じゃない'
        }
        this.$Message.error(msgTip)
        return false
      }
      if (!userName || userName === '') {
        let msgTip = '账号不能为空'
        if (locale === 'en-US') {
          msgTip = 'The account cannot be empty'
        } else if (locale === 'zh-TW') {
          msgTip = '賬號不能為空'
        } else if (locale === 'ja') {
          msgTip = 'アカウントを空にすることはできません'
        }
        this.$Message.error(msgTip)
        return false
      }
      if (!password || password === '') {
        this.$Message.error('password can not be empty')
        return false
      }
      var user = {
        userName: registerdata.userName,
        password: password,
        name: registerdata.name,
        mail: registerdata.mail,
        sex: registerdata.sex,
        birthDate: birthDate
      }
      axios.request({
        url: '/member/register',
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        data: JSON.stringify(user)
      })
        .then(function (res) {
          let status = res.data.code
          if (status === 200) {
            self.fromType('login')
            localStorage.setItem('loginType', 'login')
          } else {
            self.$Message.error(res.data.msg)
          }
        })
        .catch(function (error) {
          self.$Message.error(error)
        })
    },
    resetPassword () {
      let forget = this.forget
      let userName = forget.username
      var self = this
      var locale = localStorage.getItem('locale')
      if (!userName || userName === '') {
        let msgTip = '账号不能为空'
        if (locale === 'en-US') {
          msgTip = 'The account cannot be empty'
        } else if (locale === 'zh-TW') {
          msgTip = '賬號不能為空'
        } else if (locale === 'ja') {
          msgTip = 'アカウントを空にすることはできません'
        }
        this.$Message.error(msgTip)
        return false
      }
      axios.request({
        url: '/member/retrievePassword',
        method: 'get',
        params: {
          userName
        }
      })
        .then(function (res) {
          let status = res.data.code
          if (status === 200) {
            self.emailbackStatus = true
            self.callbackEmail = res.data.data
            self.resrBt = 'next'
          } else {
            self.emailbackStatus = false
            self.callbackEmail = res.data.msg
          }
        })
        .catch(function (error) {
          self.$Message.error(error)
        })
    },
    sendCode () {
      var self = this
      let forget = this.forget
      let code = forget.code
      let pwd = forget.newpwd
      if (code === null || code === undefined || code === '' || code === ' ' || code === 'undefined') {
        self.$Message.success(successMsgTip('codeError'))
        return false
      }
      if (pwd === null || pwd === undefined || pwd === '' || pwd === ' ' || pwd === 'undefined') {
        self.$Message.success(successMsgTip('newPwdError'))
        return false
      }
      axios.request({
        url: '/member/retrievePassword',
        method: 'post',
        params: {
          code,
          password: pwd
        }
      })
        .then(function (res) {
          let status = res.data.code
          if (status === 200) {
            self.$Message.success(successMsgTip('operation'))
            setTimeout(function () {
              self.loginType = 'login'
            }, 1500)
          } else {
            self.$Message.error(res.data.msg)
          }
        })
        .catch(function (error) {
          self.$Message.error(error)
        })
    }
  }
}
</script>
